<template>
  <a-layout class="h-screen">
    <a-layout-sider
      v-model="collapsed"
      class="bg-white border-r border-solid border-[#e2e2ea]"
      :width="250"
      :trigger="null"
      collapsible
      :collapsed-width="64"
    >
      <div
        class="h-[64px] border-b border-solid border-[#e2e2ea] flex items-center"
        :class="collapsed ? 'px-3' : 'px-6'"
      >
        <span :class="collapsed ? '' : 'mr-4'">
          <Logo></Logo>
        </span>
        <span v-show="!collapsed">产业招商云平台</span>
      </div>
      <div>
        <Menu :menus="currentMenus" :is-collapse="collapsed"></Menu>
      </div>
    </a-layout-sider>
    <a-layout class="relative">
      <a-layout-header class="header-wrapper">
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)"
        />
        <div class="flex items-center">
          <!-- <div class="mr-8">
            <a-popover>
              <template slot="content">
                <MoreApp />
              </template>
              <div class="flex items-center">
                <span class="mr-2">更多应用</span>
                <a-icon class="text-main-tips" type="caret-down" />
              </div>
            </a-popover>
          </div>
          <div class="mr-8">
            <a-badge dot>
              <a-icon class="text-xl" type="bell" />
            </a-badge>
          </div> -->
          <a-dropdown>
            <div class="flex items-center cursor-pointer">
              <div class="mr-2">
                <a-avatar
                  :size="32"
                  icon="user"
                  :src="userInfo.iconUrl && userInfo.iconUrl[0] && userInfo.iconUrl[0].url"
                />
              </div>

              <div class="mr-6">
                <div class="text-main-title text-sm">
                  {{ userInfo.accountName }}
                </div>
                <div class="text-main-content text-xs">
                  {{ userInfo.orgName }}
                </div>
              </div>

              <a-icon class="text-main-tips" type="caret-down" />
            </div>

            <template #overlay>
              <UserInfo />
            </template>
          </a-dropdown>
        </div>
      </a-layout-header>

      <a-layout-content
        class="p-7 flex flex-col h-[calc(100vh - 64px)] overflow-y-auto webkit-scrollbar"
      >
        <!-- <el-breadcrumb class="mb-6" separator="/">
          <el-breadcrumb-item
            v-for="(b, idx) in breadcrumbItems"
            :key="b.keyId"
            :class="idx === breadcrumbItems.length - 1 ? 'text-primary' : ''"
            :to="{ path: idx === 0 ? '' : b.path }"
            >{{ b.name }}</el-breadcrumb-item
          >
        </el-breadcrumb> -->

        <div class="flex-1">
          <nuxt-child></nuxt-child>
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script lang="ts">
import Vue from 'vue'
import { mapGetters } from 'vuex'
import Menu from '@/components/admin/layout/menu.vue'
// @ts-ignore
import Logo from '@/assets/svg/logo.svg?inline'
import type { IMenu } from '@/api/menu'
import UserInfo from '@/components/admin/userCenter/UserInfo.vue'
import MoreApp from '@/components/admin/userCenter/MoreApp.vue'

type IMenuList = IMenu[]

function getPathArr(
  menuList: IMenuList,
  fn: (menu: IMenu) => boolean,
  path?: IMenuList
): IMenuList | undefined {
  if (!path) {
    path = []
  }
  for (let i = 0; i < menuList.length; i++) {
    const tmp = [...path]
    const item = menuList[i]
    tmp.push(item)
    const flag = fn(item)
    if (flag) {
      // debugger
      return tmp
    }
    if (item.children) {
      const result = getPathArr(item.children, fn, tmp)
      if (result) {
        return result
      }
    }
  }
}

function findPath(menuList: IMenuList, fn: (menu: IMenu) => boolean) {
  return getPathArr(menuList, fn)
}
export default Vue.extend({
  components: {
    Menu,
    Logo,
    UserInfo,
    MoreApp,
  },
  layout: 'client-only',
  middleware: ['adminAuth'],
  data() {
    return {
      collapsed: false,
    }
  },
  computed: {
    ...mapGetters('user', ['menus', 'allMenus', 'userInfo', 'showMoreApp']),
    currentMenus() {
      const data = JSON.parse(JSON.stringify(this.menus))
      data.splice(0, data.length)
      data.push(
        {
          children: [],
          icon: 'el-icon-setting',
          keyId: '/仪表盘',
          name: '仪表盘',
          path: '/admin/instr',
          status: 1,
          type: 1,
        },
        {
          children: [
            {
              children: [
                {
                  icon: 'el-icon-setting',
                  keyId: '/名片设置',
                  name: '名片设置',
                  path: '/admin/maktool/card/setcards',
                  status: 1,
                  type: 1,
                },
                 {
                  icon: 'el-icon-setting',
                  keyId: '/招商项目展示',
                  name: '招商项目展示',
                  path: '/admin/maktool/card/itemshow',
                  status: 1,
                  type: 1,
                },
                 {
                  icon: 'el-icon-setting',
                  keyId: '/推荐',
                  name: '推荐',
                  path: '/admin/maktool/card/mend',
                  status: 1,
                  type: 1,
                },
              ],
              icon: 'el-icon-setting',
              keyId: '/智能名片',
              name: '智能名片',
              path: '/admin/maktool/card',
              status: 1,
              type: 1,
            },
            {
              children: [
                 {
                  icon: 'el-icon-setting',
                  keyId: '/ppt ',
                  name: 'ppt',
                  path: '/admin/maktool/ppt/editppt',
                  status: 1,
                  type: 1,
                },
              ],
              icon: 'el-icon-setting',
              keyId: '/智能ppt',
              name: '智能ppt',
              path: '/admin/maktool/ppt',
              status: 1,
              type: 1,
            },
            {
              children: [],
              icon: 'el-icon-setting',
              keyId: '/智能门户',
              name: '智能门户',
              path: '/admin/maktool/portal',
              status: 1,
              type: 1,
            },
            {
              children: [],
              icon: 'el-icon-setting',
              keyId: '/投资地图',
              name: '投资地图',
              path: '/admin/maktool/map',
              status: 1,
              type: 1,
            },
          ],
          icon: 'el-icon-s-order',
          keyId: '/maktool',
          name: '营销工具',
          path: '/admin/maktool',
          status: 1,
          type: 1,
        },
        {
          children: [
            {
              children: [
                 {
              children: [],
              icon: 'el-icon-setting',
              keyId: '/高级查询',
              name: '高级查询',
              path: '/admin/Tookeen/enterprise/advance',
              status: 1,
              type: 1,
            },
              {
              children: [],
              icon: 'el-icon-setting',
              keyId: '/高级结果',
              name: '高级结果',
              path: '/admin/Tookeen/enterprise/consequence',
              status: 1,
              type: 1,
            },
              ],
              icon: 'el-icon-setting',
              keyId: '/企业公海',
              name: '企业公海',
              path: '/admin/Tookeen/enterprise',
              status: 1,
              type: 1,
            },
            {
              children: [],
              icon: 'el-icon-setting',
              keyId: '/拓客查询',
              name: '拓客查询',
              path: '/admin/Tookeen/Talkquery',
              status: 1,
              type: 1,
            },
          ],
          icon: 'el-icon-s-custom',
          keyId: '/拓客工具',
          name: '拓客工具',
          path: '/admin/Tookeen',
          status: 1,
          type: 1,
        },
        {
          children: [
            {
              children: [],
              icon: '',
              keyId: '/线索管理',
              name: '线索管理',
              path: '/admin/tubeguest/clew',
              status: 1,
              type: 1,
            },
            {
              children: [],
              icon: '',
              keyId: '/我的项目',
              name: '我的项目',
              path: '/admin/tubeguest/program',
              status: 1,
              type: 1,
            },
          ],
          icon: 'el-icon-document',
          keyId: '/管客工具',
          name: '管客工具',
          path: '/admin/tubeguest',
          status: 1,
          type: 1,
        }
      )
      console.log(data)
      return data
    },
    breadcrumbItems() {
      const arr = findPath(this.allMenus, (m) => {
        return m.path === this.$route.path
      })
      return arr || []
    },
  },
})
</script>
<style lang="scss" scoped>
.header-wrapper {
  @apply bg-white
            px-4
            border-b border-solid border-[#e2e2ea]
            flex
            justify-between
            items-center;
}

.webkit-scrollbar {
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: rgba(50, 50, 50, 0.25);
    border: 2px solid transparent;
    border-radius: 10px;
    background-clip: padding-box;
  }

  &::-webkit-scrollbar-track {
    background-color: rgba(50, 50, 50, 0.05);
  }
}
</style>
